<template>
  <!-- 主体 -->
  <div id="main">
    <!-- 登陆框 -->
    <div v-if="!flag">
      <div class="login">
        <div class="title">
          商家注册
        </div>
        <!-- 切换登录方式 -->
        <div class="label">
          邮箱注册
        </div>
        <div class="input">
          <form id="app" style="margin-top:10px;">
            <div class="data"><input type="text" id="email" v-model="email" placeholder="邮箱"></div>
            <div v-if="email_flag" class="flag">
              <input type="button" value="下一步" @click="this.jump">
            </div>
            <div class="submit" v-else>
              <input type="button" value="下一步">
            </div>
          </form>
          <div class="register">
            已有账号?
            <router-link to="/login" style="color: #EA5169;">立即登录</router-link>
          </div>
        </div>

        <div class="line"></div>
        <div class="copyright">©2014-2023 Copyright © HNKJZY. All rights reserved.</div>
      </div>
    </div>

    <div v-else>
      <!-- 切换登录方式 -->
      <div class="login" style="height: 470px;">
        <div class="title">
          商家注册
        </div>
        <div class="return" @click="this.return">
          <i class="el-icon-arrow-left"></i>返回上一步
        </div>
        <div style="font-size: 12px;font-size:14px;margin-left:48px;margin-top:30px">验证码发送至 <a
            style="color: #EA5169;font-weight:bold">{{
              email }}</a>:</div>
        <div class="input">
          <form id="app" style="margin-top:-10px;">
            <div class="data"><input type="text" id="email" v-model="code" placeholder="验证码"></div>
            <div class="data"><input type="text" id="email" v-model="pass" placeholder="密码"></div>
            <div v-if="email_flag" class="flag">
              <input type="button" value="注册" @click="register">
            </div>
            <div class="submit" v-else>
              <input type="button" value="注册">
            </div>
          </form>
          <div class="register">
            已有账号?
            <router-link to="/login" style="color: #EA5169;">立即登录</router-link>
          </div>
        </div>

        <div class="line" style="margin-top: 25px;"></div>
        <div class="copyright" style="margin-top: -10px;">©2014-2023 Copyright © HNKJZY. All rights reserved.</div>
      </div>
    </div>
  </div>
</template>

<script>

import { SendCode, Register } from '../../wailsjs/go/pkg/User'

export default {
  name: "login",
  data() {
    return {
      email: "",  //用户输入的邮箱
      pass: "",   //用户输入的密码
      code: "", //验证码code
      email_flag: false,// 判断邮箱输入是否合理
      code_flag: false, //判断验证码输入是否合理
      flag: false  //是否进行验证码发送下一步
    }
  },
  //实现监控
  watch: {
    email: function (newVal, oldVal) {
      // 定义一个正则表达式来判断是否为邮箱地址
      var emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      // 判断新的值是否为有效的邮箱地址
      if (emailRegex.test(newVal)) {
        this.$data.email_flag = true;
      } else {
        this.$data.email_flag = false;
      }
    },
    //监控pass
    pass: function (newVal, oldVal) {
      //如果密码长度大于6位数则合理
      if (newVal.length >= 6) {
        this.$data.pass_flag = true;
      } else {
        this.$data.pass_flag = false
      }
    },
    code: function (newVal, oldVal) {
      //如果密码长度大于6位数则合理
      if (newVal.length != 6) {
        console.log(false);
      } else {
        this.$data.code_flag = true
      }
    },
  },
  methods: {
    //跳转register下一步
    jump() {
      // 定义一个正则表达式来判断是否为邮箱地址
      var emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      // 判断新的值是否为有效的邮箱地址
      if (emailRegex.test(this.$data.email)) {
        SendCode(this.$data.email).then((result) => {
          if (result.code == 200) {
            this.$data.flag = true;
            this.$notify({
              title: '成功',
              message: '验证码发送成功',
              type: 'success'
            });
          } else {
            this.$notify({
              title: '警告',
              message: '邮箱发送失败',
              type: 'warning'
            });
          }
        }).catch((result) => {
          this.$notify({
            title: '警告',
            message: '邮箱发送失败',
            type: 'warning'
          });
        })
      }
    },
    //实现用户注册
    register() {
      Register(this.$data.email, this.$data.pass, this.$data.code).then((result) => {
        if (result.code == 200) {
          //将路由切换到login
          this.$router.push('/login');
          this.$notify({
            title: '成功',
            message: '注册成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '警告',
            message: '注册失败',
            type: 'warning'
          });
        }
      }).catch((result) => {
        this.$notify({
          title: '警告',
          message: '注册失败',
          type: 'warning'
        });
      })
    }
  }
}
</script>

<style scoped>
#main {
  background-image: url('../assets/images/background.jpg');
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.login {
  border: 1px solid #fff;
  width: 40%;
  height: 430px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 120px;
  background-color: #fff;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.title {
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  margin-top: 40px;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.label {
  font-size: 18px;
  font-weight: bold;
  margin-top: 40px;
  border-bottom: 3px solid #EA5169;
  width: 76px;
  margin-left: 50px;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.return {
  font-size: 14px;
  margin-top: 20px;
  width: 95px;
  margin-left: 50px;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
  color: #8C8889;
}

.code {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 3px solid #EA5169;
  width: 96px;
  margin-left: 240px;
  margin-top: -30px;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.data input {
  margin-top: 20px;
  border-radius: 7px;
  margin-left: 50px;
  border: 2px solid #EA5169;
  width: 300px;
  height: 45px;
  padding-left: 10px;
}

.message {
  margin-top: 20px;
  margin-left: 50px;
  width: 300px;
  height: 45px;
}

.submit {
  margin-top: 25px;
}

.submit input {
  margin-top: 0px;
  border-radius: 7px;
  margin-left: 50px;
  border: 2px solid #F9CAD2;
  width: 300px;
  height: 45px;
  color: #fff;
  background-color: #F9CAD2;
}

.flag {
  margin-top: 25px;
}

.flag input {
  margin-top: 0px;
  border-radius: 7px;
  margin-left: 50px;
  border: 2px solid #EA5169;
  width: 300px;
  height: 45px;
  color: #fff;
  background-color: #EA5169;
}

.register {
  margin-left: 53px;
  font-size: 12px;
  margin-top: 5px;
  color: #8C8889;
  cursor: pointer;
}

.line {
  width: 302px;
  border-bottom: 1px solid #8B8889;
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.copyright {
  color: #8B8889;
  font-size: 10px;
  text-align: center;
}
</style>